<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<div class="rx-icon">
			<a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" style="margin-bottom: 5px" :label="rxIconI18n('backgroundType','背景类型')">
				<a-radio-group v-model:value="style.system">
					<a-radio value="lineage">{{rxIconI18n('system','系统')}}</a-radio>
					<a-radio value="custom">{{rxIconI18n('customize','自定义')}}</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" style="margin-bottom: 5px" :label="rxIconI18n('backgroundColor','背景颜色')">
				<div class="InsPortaMobileIconfont-back" v-if="style.system!='custom'">
					<div v-for="(item,index) in backgroundList" :key="index" :style="{'background-image':item}" @click="backgroundClick(item)"
                         class="InsPortaMobileIconfont-back-common">
                        <rx-icon-show  v-show="item==style.bgColor" icon="icon-linedui" ></rx-icon-show>
					</div>
				</div>
				<div v-else>
					<a-input style="width: 100px"  v-model:value="style.bgColor" type="color" :placeholder="rxIconI18n('backgroundColor','背景颜色')"/>
				</div>
			</a-form-item>
			<a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" style="margin-bottom: 5px" :label="rxIconI18n('selectIcon','选择应用图标')">
                <rx-icon-select style="width: 100%" v-model="style.icon" :iconUrl="iconUrl"></rx-icon-select>
			</a-form-item>
		</div>
	</rx-dialog>
</template>

<script>
import {Util,RxIconSelect,RxDialog} from "@lowcode/jpaas-base-lib";
export default {
	name: "RxIconAndColor",
	components:{
        RxIconSelect,
        RxDialog
	},
	data(){
		return{
			backgroundList:['linear-gradient(0deg,#ec9721 0%, #f3cb51 100%)',
				'linear-gradient(0deg,#f3552b 0%,#fc8b76 100%)',
				'linear-gradient(0deg,#20bb78 0%,#85e7a1 100%)',
				'linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)',
				'linear-gradient(0deg, #fe7f5f 0%,#feb079 100%)',
				'linear-gradient(0deg,#08beb5 0%,#50dda1 100%)',
				'linear-gradient(0deg,#7598ff 0%,#8c94ff 100%)',
				'linear-gradient(0deg,#9529e1 0%,#e76ff3 100%)',
				'linear-gradient(0deg,#fe6c89 0%,#ffc1a0 100%)',
				'linear-gradient(0deg,#2f3aff 0%,#6a73fd 100%)',
				'linear-gradient(0deg,#535fe6 0%,#6ddbef 100%)'],
			labelCol1: {span: 5},
			wrapperCol: {span: 16},
			style:{
				system:'',
				bgColor:'',
				icon:'',
			},
			customArr: ['customIcon', 'userCustomIcon'],
            iconUrl:""
		}
	},
	props:['destroy','system','bgColor','icon'],
    created(){
        let baseUrl = import.meta.env.JPAAS_BASE_URL
        this.iconUrl = {
            lineUrl:baseUrl + '/iconfont-svg/line/iconfont.js',
            fillUrl:baseUrl + '/iconfont-svg/fill/iconfont.js',
            colorUrl:baseUrl + '/iconfont-svg/color/iconfont.js'
        }
    },
	mounted() {
		this.style.system =this.system;
		this.style.bgColor =this.bgColor
		this.style.icon =this.icon
	},
	methods:{
		rxIconI18n(name,text,key){
			return this.$ti18(name,text,"rxIconLang",key);
		},
		backgroundClick(itme){
			this.style.bgColor=itme
		},
		setIcon(iconfont){
			this.style.icon = JSON.stringify(iconfont)
		},
		handleSubmit() {
			Util.closeWindow(this, "ok", this.style);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
	},
}
</script>

<style scoped>
.rx-icon{
	width: 100%;
}
.InsPortaMobileIconfont-back{
	display: flex;
	width: 100%;
}
.InsPortaMobileIconfont-back-common{
	width: 31px;
	height: 31px;
	border-radius: 50%;
	margin-right: 10px;
	cursor: pointer;
	text-align: center;
	line-height: 31px;
}
.InsPortaMobileIconfont-back-common i{
	color: white;
}
.InsPortaMobileIconfont-back-common{
	width: 31px;
	height: 31px;
	border-radius: 50%;
	margin-right: 10px;
	cursor: pointer;
	text-align: center;
	line-height: 31px;
}
.InsPortaMobileIconfont-back-common i{
	color: white;
}
.InsPortaMobileIconfont-back-common i{
	color: white;
}
.InsPortaMobileIconfont-user-iconfont{
	width: 50px;
	height: 50px;
	color: white;
	text-align: center;
	line-height: 50px;
	border-radius: 10px;
	cursor: pointer;
}
.InsPortaMobileIconfont-user-iconfont i{
	font-size: 27px;
}
</style>
